<template>
	<view>
		<view class="zy-row input-height">
			<view class="zy-row zy-text-white-lg" style="min-width: 100rpx;" v-if="label!=''"> {{label}} </view>
			<input class="input" :placeholder="hint" v-model="value" @input="$emit('input', $event.target.value)"
				:password="password" />
			<slot>
			</slot>
		</view>
		<zy-line></zy-line>
	</view>
</template>

<script>
	export default {
		name: "zy-input",
		data() {
			return {
				textareaVal: ''
			};
		},
		model: {
			prop: 'value',
			event: 'input' // event 后的值必须是input,其他值无效。
		},
		watch: {
			value(val) {
				this.textareaVal = val
			}
		},
		props: {
			label: {
				type: String,
				default: () => ''
			},
			value: {
				type: String,
				default: ''
			},
			hint: {
				type: String,
				default: () => '请输入'
			},
			password: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		methods: {
			onInput() {
				this.$emit('input', this.val)
			},
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-height {
		height: 100rpx;
		line-height: 100rpx;

		.input {
			padding: 0 15rpx;
			font-size: 33rpx;
			color: #fff;
			flex: 1;
		}
	}
</style>